<template>
  <div
    class="login-bind-page flexbox flex-tb flex-center bg-center bg-no-repeat lg:bg-[url(https://cd.sealmg.com/assets/img/login-page-bg.png)] max-lg:bg-[url(https://cd.sealmg.com/assets/img/mobile/login-page-bg.png)] bg-cover !w-screen !h-screen"
  >
    <div class="login-header">
      <FnNav />
    </div>
    <!-- <img
      loading="lazy"
      class="page-bg pc-page-bg object-cover"
      src="https://cd.sealmg.com/assets/img/login-page-bg.png"
      alt="Login page background"
      title="Login page background image"
      srcset=""
    /> -->
    <!-- <img
      loading="lazy"
      class="page-bg mobile-page-bg object-cover"
      src="https://cd.sealmg.com/assets/img/mobile/login-page-bg.png"
      alt="Mobile login background"
      title="Mobile login background image"
    /> -->
    <div class="login-box flexbox">
      <div class="left flex-1 z-[10]">
        <NuxtLink :to="localePath('/')">
          <img loading="lazy" class="logo" src="https://cd.sealmg.com/assets/img/logo-img.png" alt="Company logo" title="SEALMG logo" />
        </NuxtLink>
        <div class="title">{{ $t('pages.bind') }}{{ obj[platform] && obj[platform].code }}{{ $t('register.formTitle') }}</div>
        <div class="desc">{{ $t('pages.bind') }}{{ obj[platform] && obj[platform].code }}{{ $t('pages.bindDesc') }}</div>
        <div class="concat flexbox flex-align-center">
          <img
            loading="lazy"
            class="img"
            v-lazy="obj[platform] ? obj[platform].icon : ''"
            :alt="'Platform icon - ' + (obj[platform]?.code || '')"
            :title="'Login with ' + (obj[platform]?.code || '')"
          />
          <img
            loading="lazy"
            class="icon"
            src="https://cd.sealmg.com/assets/img/concat-img.png"
            alt="Connection indicator"
            title="Account connection"
          />
          <img loading="lazy" class="img" src="https://cd.sealmg.com/assets/img/logo3.png" alt="SEALMG secondary logo" title="SEALMG brand logo" />
        </div>
        <div class="lange flexbox flex-align-center flex-justify-star">
          <Langes langTheme="gray2" :onlyLange="false" />
        </div>
        <div class="time">
          <span class="link" @click="golink">{{ initData.beian || '' }}</span>
        </div>
      </div>
      <div class="right">
        <div class="form">
          <el-form label-position="top" :model="form">
            <el-form-item :label="$t('formItem.email')">
              <el-input v-model="form.email" type="email" :placeholder="$t('formPlaceholder.input')">
                <!-- <img slot="prefix" class="input-icon" src="https://cd.sealmg.com/assets/img/email-icon.png" /> -->
              </el-input>
            </el-form-item>
            <el-form-item :label="$t('formItem.password')">
              <el-input v-model="form.newpwd" show-password :minlength="2" :maxlength="20" :placeholder="$t('formPlaceholder.input')">
                <!-- <img slot="prefix" class="input-icon" src="https://cd.sealmg.com/assets/img/pwd-icon.png" /> -->
              </el-input>
            </el-form-item>
            <div class="pwd-check">
              <LazyPwdCheck ref="pwdcheck" :targetVal="form.newpwd" />
            </div>
            <el-form-item :label="$t('formItem.confirmPassword')">
              <el-input v-model="form.newpwdAgain" show-password :minlength="2" :maxlength="20" :placeholder="$t('formPlaceholder.input')">
                <!-- <img slot="prefix" class="input-icon" src="https://cd.sealmg.com/assets/img/email-icon.png" /> -->
              </el-input>
            </el-form-item>
          </el-form>
          <el-button
            class="theme-btn one-line"
            :disabled="code && form.email && form.newpwd && form.newpwdAgain && form.newpwd == form.newpwdAgain ? false : true"
            :loading="btnLoading"
            @click="submitEmamil"
          >
            {{ $t('formBtn.register') }}
          </el-button>
        </div>
      </div>
    </div>
    <base-info />
    <el-dialog
      class="confirm-dialog delete-dialog"
      title=""
      width="522px"
      :show-close="false"
      :close-on-click-modal="false"
      :visible.sync="showStatus"
    >
      <div class="flexbox flex-tb flex-align-center box-content pt-4">
        <div class="title">{{ $t('confirmDialog.removeTips') }}</div>
        <div class="title-desc">{{ resMsg }}</div>
      </div>
      <div class="handle flexbox flex-align-center flex-justify-between !grid !grid-cols-2">
        <el-button class="btn cancle-btn col-span-1" @click="showStatus = false">
          {{ $t('formBtn.cancel') }}
        </el-button>
        <el-button class="btn delete-btn col-span-1" @click="sureHandle">
          {{ $t('formBtn.confirm') }}
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import FnNav from '@/components/mobile/FnNav'
  import PwdCheck from '@/components/PwdCheck'
  let wechat = 'https://cd.sealmg.com/assets/img/mobile/other-login/wechat-active.png'
  let tiktok = 'https://cd.sealmg.com/assets/img/mobile/other-login/tiktok-active.png'
  let x = 'https://cd.sealmg.com/assets/img/mobile/other-login/x-active.png'
  let vk = 'https://cd.sealmg.com/assets/img/mobile/other-login/vk-active.png'
  let twitch = 'https://cd.sealmg.com/assets/img/mobile/other-login/twitch-active.png'
  let steam = 'https://cd.sealmg.com/assets/img/mobile/other-login/steam-active.png'
  let google = 'https://cd.sealmg.com/assets/img/mobile/other-login/google-active.png'
  let qq = 'https://cd.sealmg.com/assets/img/mobile/other-login/qq-active.png'
  let facebook = 'https://cd.sealmg.com/assets/img/mobile/other-login/facebook-active.png'
  import { throttle } from '@/static/js/common'
  export default {
    name: 'loginBind',
    layout: 'default',

    components: {
      FnNav,
      PwdCheck
    },
    props: {},
    data() {
      return {
        btnLoading: false, // 按钮加载状态
        code: '', // 第三方登录返回的code
        platform: '', // 第三方平台标识
        obj: {
          qq: { icon: qq, platform: 'qq', code: 'QQ' }, // QQ登录配置
          wechat: { icon: wechat, platform: 'wechat', code: 'Wechat' }, // 微信登录配置
          tiktok: { icon: tiktok, platform: 'tiktok', code: 'Tiktok' }, // TikTok登录配置
          x: { icon: x, platform: 'x', code: 'X' }, // X平台登录配置
          vk: { icon: vk, platform: 'vk', code: 'VK' }, // VK登录配置
          twitch: { icon: twitch, platform: 'twitch', code: 'Twitch' }, // Twitch登录配置
          steam: { icon: steam, platform: 'steam', code: 'Steam' }, // Steam登录配置
          google: { icon: google, platform: 'google', code: 'Google' }, // Google登录配置
          facebook: { icon: facebook, platform: 'facebook', code: 'Facebook' } // Facebook登录配置
        },
        form: {
          email: '', // 邮箱输入
          newpwd: '', // 密码输入
          newpwdAgain: '' // 确认密码输入
        },
        showStatus: false, // 状态弹窗显示控制
        resMsg: '', // 接口返回消息
        resCode: '' // 接口返回状态码
      }
    },
    watch: {},
    computed: {
      initData() {
        return this.$store.state.initData.initData || {}
      }
    },
    created() {
      // 从路由查询参数中获取平台和授权码信息
      const { platform = '', code = '' } = this.$route.query
      this.platform = platform
      this.code = code
    },
    methods: {
      golink() {
        if (process.client) {
          window.open('https://beian.miit.gov.cn/#/Integrated/index')
        }
      },
      //  代码太多不好优化
      submitEmamil: throttle(
        function () {
          if (!this.$refs.pwdcheck.checkRes || this.form.newpwd != this.form.newpwdAgain) {
            return
          }
          if (this.code && this.form.email && this.form.newpwd && this.form.newpwdAgain) {
            this.btnLoading = true
            this.$axios
              .post(
                '/api/user/register',
                {
                  type: 'third',
                  email: this.form.email,
                  password: this.form.newpwd,
                  code: this.code
                },
                {
                  // setConfig:{
                  //   customCode:true
                  // }
                }
              )
              .then(res => {
                this.btnLoading = false
                if (res.code == 2404) {
                  // this.$router.replace({
                  //   path: this.localePath('/register')
                  // })
                  this.resCode = res.code
                  this.resMsg = res.msg
                  this.showStatus = true
                } else if (res.code == 2401) {
                  // this.$router.replace({
                  //   path: this.localePath('/login')
                  // })
                  this.resCode = res.code
                  this.resMsg = res.msg
                  this.showStatus = true
                } else if (res.code == 1) {
                  this.$store.commit('user/setToken', res.data.userinfo.token || '')
                  this.$store.commit('user/setUserInfo', res.data.userinfo || {})
                  this.$router.replace({
                    path: this.localePath('/')
                  })
                } else {
                  this.$message({
                    showClose: true,
                    message: res.data.msg,
                    type: 'error'
                  })
                }
              })
              .catch(err => {
                this.btnLoading = false
              })
          }
        },
        2000,
        {
          leading: true,
          trailing: false
        }
      ),
      //根据返回码重定向到对应页面
      sureHandle() {
        this.showStatus = false
        const redirectMap = {
          2404: '/register',
          2401: '/login'
        }
        const redirectPath = redirectMap[this.resCode]
        if (redirectPath) {
          this.$router.replace({
            path: this.localePath(redirectPath)
          })
        }
      }
    }
  }
</script>
<style lang="less" scoped>
  .login-bind-page {
    position: relative;
    width: 100vw;
    height: 100vh;
    .login-header {
      display: none;
    }
    .page-bg {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100vh;
      z-index: -1;
    }
    .pc-page-bg {
      display: block;
    }
    .mobile-page-bg {
      display: none;
    }
    .login-box {
      width: 960px;
      height: 574px;
      box-sizing: border-box;
      overflow: hidden;
      background: @color-ff;
      box-shadow: 0px 16px 32px 0px rgba(12, 3, 0, 0.06);
      border-radius: 32px;
      position: relative;
      .left {
        padding: 0 32px;
        height: 574px;
        .logo {
          width: 167px;
          height: 48px;
          margin-top: 32px;
          margin-left: 10px;
        }
        .title {
          margin-left: 10px;
          margin-top: 36px;
          font-weight: 500;
          font-size: 24px;
          color: @font-color-14;
        }
        .desc {
          margin-left: 10px;
          margin-top: 8px;
          font-weight: 500;
          font-size: 12px;
          color: @font-color-99;
        }
        .concat {
          margin-top: 44px;
          margin-left: 14px;
          .img {
            width: 64px;
            height: 64px;
          }
          .icon {
            width: 32px;
            height: 32px;
            margin: 0 20px;
          }
        }
        .lange {
          margin-top: 177px;
          /deep/ .lange-btn {
            margin: 0;
            color: @font-color-26 !important;
            background: @color-f7 !important;
          }
        }
        .time {
          margin-top: 16px;
          font-weight: 400;
          font-size: 12px;
          color: @font-color-99;
          .link {
            cursor: pointer;
          }
        }
      }
      .right {
        width: 542px;
        height: 574px;
        box-sizing: border-box;
        .form {
          margin-top: 58px;
          padding: 0 32px;
          .el-form-item {
            margin-bottom: 16px;
          }
          .pwd-check {
            margin-top: -8px;
            margin-bottom: 16px;
          }
          /deep/ .el-form--label-top .el-form-item__label {
            font-weight: 500;
            font-size: 14px;
            color: @font-color-66;
            line-height: 22px;
            padding: 0;
            margin-bottom: 8px;
          }
          /deep/ .el-input__inner {
            height: 48px;
            color: @font-color-14;
          }
          /deep/ .el-input--prefix .el-input__inner {
            padding-left: 54px;
          }
          /deep/ .el-input__prefix {
            left: 12px;
          }
          .input-icon {
            width: 24px;
            height: 24px;
            margin-top: 12px;
          }
          .theme-btn {
            width: 100%;
            height: 50px;
            line-height: 50px;
            margin-top: 32px;
          }
        }
      }
    }
  }
  @media only screen and (min-width: 1200px) {
  }
  @media screen and (max-width: 992px) and (min-width: 768px) {
    .login-bind-page {
      justify-content: flex-start;
      .confirm-dialog {
        /deep/ .el-dialog {
          width: 743px !important;
        }
      }
      .login-header {
        display: block;
      }
      .pc-page-bg {
        display: none;
      }
      .mobile-page-bg {
        display: block;
        width: 736px;
        left: 50%;
        transform: translateX(-50%);
      }
      .login-box {
        display: block;
        width: 768px;
        height: auto;
        box-sizing: border-box;
        overflow: hidden;
        box-shadow: none;
        position: relative;
        .left {
          padding: 0 16px;
          width: 100%;
          height: auto;
          .logo {
            display: none;
          }
          .title {
            margin-left: 0;
            margin-top: 20px;
            text-align: center;
          }
          .desc {
            margin-left: 0px;
            margin-top: 6px;
            font-weight: 400;
            font-size: 14px;
            width: 288px;
            text-align: center;
            line-height: 16px;
            margin: 0 auto;
          }
          .concat {
            justify-content: center;
            margin-left: 0;
            margin-top: 24px;
          }
          .lange {
            display: none;
          }
          .time {
            display: none;
          }
        }
        .right {
          padding: 20px 16px;
          // margin-bottom: 34px;
          width: 100%;
          height: auto;
          box-sizing: border-box;
          background: @color-ff;
          .form {
            margin-top: 0px;
            padding: 0;
            .el-form-item {
              margin-bottom: 10px;
            }
            .theme-btn {
              height: 48px;
              margin-top: 14px;
            }
          }
        }
      }
      /deep/.base-info {
        // margin-top: 18px;
        // padding-bottom: 86px;
      }
    }
  }
  @media screen and (max-width: 767px) {
    .login-bind-page {
      justify-content: flex-start;
      .confirm-dialog {
        /deep/ .el-dialog {
          width: 350px !important;
        }
      }
      .login-header {
        display: block;
      }
      .pc-page-bg {
        display: none;
      }
      .mobile-page-bg {
        display: block;
        width: 343px;
        left: 50%;
        transform: translateX(-50%);
      }
      .login-box {
        display: block;
        width: 375px;
        height: auto;
        box-sizing: border-box;
        overflow: hidden;
        box-shadow: none;
        position: relative;
        .left {
          padding: 0 16px;
          width: 100%;
          height: auto;
          .logo {
            display: none;
          }
          .title {
            margin-left: 0;
            margin-top: 20px;
            text-align: center;
          }
          .desc {
            margin-left: 0px;
            margin-top: 6px;
            font-weight: 400;
            font-size: 14px;
            width: 288px;
            text-align: center;
            line-height: 16px;
            margin: 0 auto;
          }
          .concat {
            justify-content: center;
            margin-left: 0;
            margin-top: 24px;
          }
          .lange {
            display: none;
          }
          .time {
            display: none;
          }
        }
        .right {
          padding: 20px 16px;
          // margin-bottom: 34px;
          width: 100%;
          height: auto;
          box-sizing: border-box;
          background: @color-ff;
          .form {
            margin-top: 0px;
            padding: 0;
            .el-form-item {
              margin-bottom: 10px;
            }
            .theme-btn {
              height: 48px;
              margin-top: 14px;
            }
          }
        }
      }
      /deep/.base-info {
        // margin-top: 18px;
        // padding-bottom: 86px;
      }
    }
  }
</style>
